import React, { Component } from 'react'
import Info from './component/info'
import Avatar from './component/avatar'
import Password from './component/password'
import Work from './component/work'
import Order from './component/order'
import { Menu } from './config'
import { connect } from 'react-redux'
import { actionCreators } from './store';
import { sendSms, checkLogin } from '../../components/header/store/actionCreators'
import Assistant from './component/assistant'
import Phone from './component/phone'
import {
  PersonWrapper,
  ContentWrapper,
  NavWrapper,
  Content,
  NavTitle,
  ImgWrapper,
  MenuWrapper,
  ContentTitle,
  ContentItem
} from './style'

import { Icon } from 'antd'

class Person extends Component {
  // constructor(props) {
  //   super(props);
  //   // this.state = {
  //   //   menu: 'info',
  //   //   title: '修改资料'
  //   // }
  // }
  // componentDidMount() {
  //   setTimeout(() => {
  //     let cH = document.getElementById('p_content').clientHeight
  //     let bH = document.body.clientHeight - 120
  //     let t = document.getElementById('footer')
  //     if(cH < bH) {
  //       t.style.position = 'absolute'
  //       t.style.bottom = '0'
  //     }else {
  //       t.style.position= 'relative'
  //     }
  //   }, 300);
  // }

  renderContent() {
    let menu = this.props.menuInfo.get('menu')
    switch (menu) {
      case "info":
        if (this.props.login) {
          return <Info form={this.props.login.toJSON()} saveInfo={(obj) => this.props.saveInfo.bind(this, obj)} />
        } else {
          window.location.href = "/"
        }
      case "avatar":
        return <Avatar saveAvatar={(obj) => this.props.saveAvatar(obj)} />
      case "password":
        return <Password savePssword={(obj) => this.props.savePssword(obj)} {...this.props} />
      case "work":
        return <Work />
      case "order":
        return <Order />
      // case "assistant":
      //   return <Assistant {...this.props}/>
      case "phone":
        return <Phone {...this.props} />
    }
  }
  renderMenu() {
    let arr = []
    Menu.map(item => {
      if (item.name === 'assistant' && this.props.login && this.props.login.get('userType') !== 'assistant') {
      } else if (item.name === 'phone' && this.props.login && this.props.login.get('mobile')) {
      } else {
        arr.push(
          <a key={item.id} onClick={() => (this.props.changeMenu({ menu: item.name, title: item.title }))}>
            <li className={this.props.menuInfo.get('menu') == item.name ? "active" : ""}>
              {item.id === 7 ? <Icon type="phone" style={{ fontSize: '16px' }} /> : <i className={`iconfont ${item.icon}`}></i>}
              <span>{item.title}</span>
            </li>
          </a>
        )
      }
    })
    return arr
  }
  render() {
    return (
      <PersonWrapper>
        <ContentWrapper>
          <NavWrapper style={{ marginBottom: '20px' }}>
            <NavTitle>
              个人中心
            </NavTitle>
            <ImgWrapper>
              {
                this.props.login && this.props.login.get('avatar') ? <img src={this.props.login.get('avatar')} /> : <img src={require('./img/default_head_photo.png')} />
              }
              <p style={{ whiteSpace: 'normal', wordBreak: 'break-all', overflow: 'hidden' }}>{this.props.login ? this.props.login.get('name') : ''}</p>
            </ImgWrapper>
            <MenuWrapper>
              {this.renderMenu()}
            </MenuWrapper>
          </NavWrapper>
          <Content id="p_content">
            <ContentTitle>
              {this.props.menuInfo.get('title')}
            </ContentTitle>
            <ContentItem>
              {this.renderContent()}
            </ContentItem>
          </Content>
        </ContentWrapper>
      </PersonWrapper>
    )
  }
}


const mapState = (state) => {
  // console.log()
  return {
    login: state.getIn(['header', 'login']),
    menuInfo: state.getIn(['person', 'menuInfo']),
    sms: state.getIn(['header', 'sms']),
    smsCount: state.getIn(['header', 'smsCount'])
  }
}

const mapDispatch = (dispatch) => {
  return {
    saveInfo(obj) {
      dispatch(actionCreators.saveUserInfo(obj))
    },
    saveAvatar() {
      dispatch(checkLogin())
    },
    savePssword(obj) {
      dispatch(actionCreators.savePssword(obj))
    },
    sendSms(obj) {
      dispatch(sendSms(obj))
    },
    bindPhone(obj) {
      dispatch(actionCreators.bindPhone(obj))
    },
    checkLogin() {
      dispatch(checkLogin())
    },
    changeMenu(params) {
      let t = document.getElementById('footer')
      t.style.position = 'absolute'
      dispatch(actionCreators.changeMenu(params))
    }
  }
}

export default connect(mapState, mapDispatch)(Person)